<template>
  <div class="mine-box">
    <van-nav-bar
      title="矿池"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      class="nav-bar"
    />

    <div class="mawal_title">矿池数量：{{ poolTopData.total_qyt }}</div>

    <div class="pull-title">矿池记录</div>
    <div class="wallet-list">
      <van-row
        class="mywallet-con-address"
        style="border-radius: 0;"
      >
        <van-col span="4">币种</van-col>
        <van-col span="6">时间</van-col>
        <van-col span="4">值</van-col>
        <van-col span="5">类型</van-col>
        <van-col span="5">转入来源</van-col>
      </van-row>
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        :immediate-check="false"
        :offset="100"
        class="container"
      >
        <van-row
          class="mywallet-con-address"
          style="border-radius: 0;"
          v-for="(item, index) in HistoricalList"
          :key="index"
        >
          <van-col span="4">{{item.tk_code}}</van-col>
          <van-col span="6">{{item.created_on}}</van-col>
          <van-col span="4">{{item.qty}}</van-col>
          <van-col span="5">{{item.type}}</van-col>
          <van-col span="5">{{item.from_user.ref_code}}</van-col>
        </van-row>
      </van-list>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'vant';

  export default {
    data(){
      return {
        showChangeName: false,
          showChangePhone:false,
        showImgChoose: false,
        myCroppa: {},
        config: {
          value: 'https://www.baidu.com',
          imagePath: './examples/assets/logo.png',
          filter: 'color'
        },
        erweimaControl:true,
        islogin:false,
        downloadButton: false,
        //  用户账l号信息
        accountList: [],

        //用户号码
        hideNum:null,

        //  绑定微信授权flag
        bindIndex: false,

        bindTitle:'待绑定',
        // 用户头像
        userAvatar:'',
        //  版本参数
        param_uuid:null,

        param_scource:null,

        nickname:"",
        usermobile:"",
        imgsrc:"",
        userid:"",
        HistoricalList: [],
        pageCount: 10,
        pageIndex: 0,
        poolTopData: {},
        lastPageUrl:"",
        loading: false,
        finished: false,
      }
    },
    created(){

    },
    mounted(){
      this.lastPageUrl = sessionStorage.getItem("lastAndNowPage").split('-')[1];
      sessionStorage.setItem("lastAndNowPage",this.lastPageUrl+"-/orepull");
      if(!sessionStorage.getItem("usermessage")) {
        this.$router.push('/login');
      }
      token_g = JSON.parse(sessionStorage.getItem("usermessage")).token;
      this.getPoolData()
      this.getPoolTopData()
    },
    methods:{
      onClickLeft(){
        this.$router.push(this.lastPageUrl)
      },
      onLoad() {
        this.pageIndex ++
        this.getPoolData()
      },
      getPoolData() {
        let params = {}
        if(this.pageIndex != 0) {
          params.page = this.pageIndex + 1
        }
        this.$axios({
          method: 'GET',
          url: url_g + '/user/transaction/pool/',
          params: params,
          headers: {
            'Authorization': 'Bearer ' + token_g
          }
        }).then((res) => {
          console.log(res)
          if(res.data && res.data.results){
            res.data.results.map(function(item,index){
              item.created_on = item.created_on.replace('T'," ")
              if(item.type == "1"){
                item.type = "买入"
              }else if(item.type == "2"){
                item.type = "卖出"
              }else if(item.type == "3"){
                item.type = "买入矿池"
              }else if(item.type == "4"){
                item.type = "挖矿"
              }else if(item.type == "5"){
                item.type = "节点奖励"
              }else if(item.type == "6"){
                item.type = "直推奖"
              }else if(item.type == "7"){
                item.type = "新用户红包奖励"
              }else if(item.type == "8"){
                item.type = "转入"
              }else if(item.type == "9"){
                item.type = "转出"
              }
            })

            // list
            let newArr = res.data.results
            this.pageCount = res.data.count
            for (let i = 0; i < newArr.length; i ++) {
              var num = ''
              num =  newArr[i].qty;
              num = Math.floor(num * 100) / 100
              newArr[i].qty = num

              this.HistoricalList.push(newArr[i])
            }

            this.loading = false;
            if (this.HistoricalList.length >= this.pageCount) {
              this.finished = true;
            }
          }
        }).catch((e) => {
          Toast(e.response.data.detail);
        });
      },
      getPoolTopData() {
        this.$axios({
          method: 'GET',
          url: url_g + '/user/wallet/',
          data: {},
          headers: {
            'Authorization': 'Bearer ' + token_g
          }
        }).then((res) => {
          if(res.data && res.data.results){
            let newData = res.data.results
            for(let i = 0, len = newData.length; i < len; i ++) {
              if(newData[i].tk_code == 'OBTPL') {
                newData[i].total_qyt = parseFloat(newData[i].total_qyt)
                this.poolTopData = newData[i]
                break
              }
            }
          }
        }).catch((e) => {
          Toast(e.response.data.detail);
        });
      },
    }
  }
</script>

<style scoped>
.mine-box{
  height: 100vh;
  background: -webkit-linear-gradient( top,#028aed,#273eec);
  color: #fff;
  overflow: auto;
}
.nav-bar {
  color: #000;
}
.pull-title{
  margin: 20px 0 10px 10px;
  font-size: 18px;
}
.mywallet-con-address{
  border-radius: 10px;
  text-align: center;
  line-height: 20px;
  border-bottom: 1px solid #CCCCCC;
  padding: 10px;
}
.mywallet-con-address:last-child{
  border-bottom:none !important;
}
.wallet-top {
  border:1px solid #CCCCCC;
  border-radius:5px;
  margin: 5px;
  text-align: left;
  height: auto;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  justify-content: center;
}
.wallet-top-content {
  padding: 10px;
}
.mawal_title {
  margin: 10px;
  font-size: 18px;
}
.num_value {
  line-height: 40px;
}
.wallet-list {
  border:1px solid #CCCCCC;
  border-radius:5px;
  margin: 5px;
  text-align: left;
  height: auto;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  justify-content: center;
}
</style>
